<template>
  <div>
    <el-dialog title="请选择店员" :visible.sync="dialogVisible5" width="75%">
      <el-table :data="shopAssistantPage.records" style="width: 100%;margin-left: 30px;"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column prop="adminName" label="用户名" width="100">
        </el-table-column>
        <el-table-column prop="adminPhone" label="手机号" width="120">
        </el-table-column>
        <el-table-column prop="nickName" label="昵称" width="120">
        </el-table-column>
        <el-table-column prop="realName" label="真名" width="120">
        </el-table-column>
        <el-table-column prop="role" label="角色" width="100">
        </el-table-column>
        <el-table-column prop="adminWorkDate" label="入职时间" width="180">
        </el-table-column>
        <el-table-column prop="state" label="账号状态" width="80">
          <template slot-scope="scope">
            {{scope.row.state==0?"正常":"禁用"}}
          </template>
        </el-table-column>
      </el-table>
      <div>
        <div class="block">
          <el-pagination @size-change="handleSizeChange2" @current-change="handleCurrentChange2"
            :page-sizes="[5, 10, 20]" :page-size="5" layout="total, sizes, prev, pager, next, jumper"
            :total="shopAssistantPage.total">
          </el-pagination>
        </div>
        <el-button type="success" style="margin-left: 800px;" @click="addShopAssistantOk">确认</el-button>
      </div>
    </el-dialog>

    <el-dialog title="门店店员" :visible.sync="dialogVisible4" width="75%">
      <el-table :data="assistantList" style="width: 100%;margin-left: 30px;">
        <el-table-column prop="adminName" label="用户名" width="100">
        </el-table-column>
        <el-table-column prop="adminPhone" label="手机号" width="120">
        </el-table-column>
        <el-table-column prop="nickName" label="昵称" width="120">
        </el-table-column>
        <el-table-column prop="realName" label="真名" width="120">
        </el-table-column>
        <el-table-column prop="role" label="角色" width="100">
        </el-table-column>
        <el-table-column prop="adminWorkDate" label="入职时间" width="180">
        </el-table-column>
        <el-table-column prop="state" label="账号状态" width="80">
          <template slot-scope="scope">
            {{scope.row.state==0?"正常":"禁用"}}
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>


    <el-dialog title="请选择仓库绑定" :visible.sync="dialogVisible2" width="70%">
      <el-table :data="whpage.records" style="width: 100%">
        <el-table-column prop="whName" label="仓库名称" width="180">
        </el-table-column>
        <el-table-column prop="contact" label="仓库联系人" width="180">
        </el-table-column>
        <el-table-column prop="whPhone" label="仓库联系电话" width="180">
        </el-table-column>
        <el-table-column prop="address" label="仓库地址" width="180">
        </el-table-column>
        <el-table-column prop="state" label="仓库状态" width="100">
          <template slot-scope="scope">
            {{scope.row.state==0?"正常":"禁用"}}
          </template>
        </el-table-column>
        <el-table-column label="绑定仓库">
          <template v-slot="scope">
            <el-button type="success" size="small" round
              @click="bindingShopWarehouse(scope.row.warehouseId)">绑定</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination @size-change="handleWhSizeChange" @current-change="handleWhCurrentChange"
          :page-sizes="[5, 10, 20]" :page-size="5" layout="total, sizes, prev, pager, next, jumper"
          :total=" whpage.total">
        </el-pagination>
      </div>
    </el-dialog>


    <el-dialog title="查看绑定仓库" :visible.sync="dialogVisible1" width="70%">
      <el-table :data="pawnShopWhList" style="width: 100%">
        <el-table-column prop="whName" label="仓库名称" width="180">
        </el-table-column>
        <el-table-column prop="contact" label="仓库联系人" width="180">
        </el-table-column>
        <el-table-column prop="whPhone" label="仓库联系电话" width="180">
        </el-table-column>
        <el-table-column prop="address" label="仓库地址" width="180">
        </el-table-column>
        <el-table-column prop="state" label="仓库状态" width="100">
          <template slot-scope="scope">
            {{scope.row.state==0?"正常":"禁用"}}
          </template>
        </el-table-column>
        <el-table-column label="解除绑定">
          <template v-slot="scope">
            <el-button type="danger" size="small" round
              @click="cancelBindingShopWarehouse(scope.row.warehouseId)">解除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog title="修改门店信息" :visible.sync="dialogVisible3" width="40%">
      <el-row style="margin-top: 10px;">
        <el-col :span="16" :offset="2">
          <el-input v-model="updatePawnShop.shopName">
            <template slot="prepend">门店名</template>
          </el-input>
        </el-col>
      </el-row>
      <el-row style="margin-top: 10px;">
        <el-col :span="16" :offset="2">
          <el-input v-model="updatePawnShop.shopPhone">
            <template slot="prepend">联系电话</template>
          </el-input>
        </el-col>
      </el-row>
      <el-row style="margin-top: 10px;">
        <el-col :span="16" :offset="2">
          <el-input v-model="updatePawnShop.address">
            <template slot="prepend">门店地址</template>
          </el-input>
        </el-col>
      </el-row>
      <el-row style="margin-top: 10px;">
        <el-col :span="16" :offset="2">
          <div class="lf"
            style="background-color: #F5F7FA;color: #909399;font-size: 14px;text-align: center;line-height: 35px;border: gainsboro solid 1px;border-radius: 5px;width: 95px;height: 35px;">
            店长 </div>
          <el-select class="lf" v-model="updatePawnShop.shopBossId">
            <el-option v-for="item in shopBoss" :key="item.accountId" :label="item.realName" :value="item.accountId">
            </el-option>
          </el-select>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="updatePawnShop1">确定</el-button>
      </span>
    </el-dialog>
    <el-row>
      <el-col :span="3" :offset="14" style="font-size: 18px;text-align: center;">
        <span>门店名称/地址</span>
      </el-col>
      <el-col :span="4">
        <el-input v-model="condition" placeholder="请输入内容"></el-input>
      </el-col>
      <el-col :span="2" style="margin-left: 10px;">
        <el-button type="primary" icon="el-icon-search" @click="findShopByCondition">搜索</el-button>
      </el-col>
    </el-row>
    <el-table :data="page.records" style="width: 100%">
      <el-table-column prop="shopName" label="门店名称" width="100">
      </el-table-column>
      <el-table-column prop="contact" label="门店联系人" width="90">
      </el-table-column>
      <el-table-column prop="shopPhone" label="门店联系电话" width="110">
      </el-table-column>
      <el-table-column prop="address" label="门店地址" width="150">
      </el-table-column>
      <!-- <el-table-column
        prop="state"
        label="门店状态"
        width="80">
        <template slot-scope="scope">
          {{scope.row.state==0?"正常":"禁用"}}
        </template>
      </el-table-column> -->
      <el-table-column label="查看仓库" width="100">
        <template v-slot="scope">
          <el-button type="text" @click="findShopWh(scope.row.pawnWarehousesList,scope.row.shopId)">查看</el-button>
        </template>
      </el-table-column>
      <el-table-column label="绑定仓库" width="100">
        <template v-slot="scope">
          <el-button type="text" @click="bingdingWindow(scope.row.shopId)">绑定</el-button>
        </template>
      </el-table-column>
      <!-- <el-table-column label="修改状态" width="100">
      <template v-slot="scope">
       <el-button type="success" v-if="scope.row.state==1" size="small" round @click="updateShopStateStart(scope.row.shopId)">启用</el-button>
        <el-button type="danger" v-if="scope.row.state==0" size="small" round  @click="updateShopStateDown(scope.row.shopId)" >禁用</el-button>
       </template>
      </el-table-column> -->
      <el-table-column label="修改信息" width="80">
        <template v-slot="scope">
          <el-button type="primary" size="small" round @click="updatePawnShopWindow(scope.row.shopId)">修改</el-button>
        </template>
      </el-table-column>
      <el-table-column label="店员详情" width="180">
        <template v-slot="scope">
          <el-button type="primary" size="mini" round
            @click="findShopAssistantByShopId(scope.row.shopId)">查看</el-button>
          <el-button type="warning" size="mini" round @click="addShopAssistant(scope.row.shopId)">添加</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 30]"
        :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="page.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    name: "FindShop",
    data() {
      return {
        pageNum: 1, //分页参数
        pageSize: 10, //分页参数
        page: {}, //门店分页对象
        condition: "", //门店条件查询
        pawnShopWhList: [], //门店绑定仓库集合
        dialogVisible1: false,
        dialogVisible2: false,
        dialogVisible3: false,
        dialogVisible4: false,
        dialogVisible5: false,
        whpage: {}, //仓库分页集合
        whPageNum: 1, //分页参数
        whPageSize: 5, //分页参数
        bingdingShopId: "", //绑定门店Id
        updatePawnShop: {}, //修改门店参数
        shopBoss: [], //门店店长集合
        assistantList: [], //当前门店店员ID
        shopAssistantPage: {}, // 所有店员ID
        assistantPageNum: 1,
        assistantPageSize: 5,
        addAssistantForm: {
          shopId: "",
          accounts: []
        }
      }
    },
    methods: {
      addShopAssistantOk() {
        console.log(this.addAssistantForm)
        this.$http.post("/admin/pawnShop/insertShopAssistant", this.addAssistantForm).then(resp => {
          if (resp.data.code == 200) {
            this.$message({
              message: '添加店员成功',
              type: 'success'
            });
          } else {
            this.$message.error(resp.data.message);
          }
        })
        this.addAssistantForm = {
          shopId: "",
          accounts: []
        }
        this.dialogVisible5 = false
        this.
        this.findAllShopAssistant()
        loadAllPawnShop()
      },
      handleSelectionChange(val) {
        for (let v of val) {
          this.addAssistantForm.accounts.push(v.accountId)
        }
      },
      findAllShopAssistant() {
        this.$http.get("/admin/pawnShop/findAllShopAssistant", {
          params: {
            pageNum: this.assistantPageNum,
            pageSize: this.assistantPageSize
          }
        }).then(resp => {
          this.shopAssistantPage = resp.data.data
          console.log(this.shopAssistantPage)
        })
      },
      addShopAssistant(shopId) {
        this.addAssistantForm.shopId = shopId
        this.dialogVisible5 = true
        this.findAllShopAssistant()
      },
      findShopAssistantByShopId(shopId) {
        this.dialogVisible4 = true
        this.$http.get("/admin/pawnShop/findShopAssistantByShopId", {
          params: {
            shopId: shopId
          }
        }).then(resp => {
          this.assistantList = resp.data.data
        })
      },
      /**
       * 查询所有店长
       */
      selectAllShopBoss(contact,shopBossId) {
        this.$http.get("admin/adminInfo/selectAllShopBoss").then(resp => {
          this.shopBoss = resp.data.data
          for (var i = 0; i < this.shopBoss.length; i++) {
            let s = this.shopBoss[i]
            console.log(s)
            if(s.state==1){
              this.shopBoss.splice(s)
            }
          }
          let boss = {}
          boss.accountId = shopBossId
          boss.realName = contact
          console.log(boss)
          this.shopBoss.push(boss)
          console.log(this.shopBoss)
        })
      },
      /**
       * 修改门店信息
       */
      updatePawnShop1() {
        this.$http.post("/admin/pawnShop/updatePawnShop",this.updatePawnShop).then(resp => {
          if (resp.data.code == 200) {
            this.$message({
              message: '修改门店成功',
              type: 'success'
            });
          } else {
            this.$message.error(resp.data.message);
          }
          this.dialogVisible3 = false
          this.loadAllPawnShop()
        })
      },
      /**修改门店信息窗口
       * @param {Object} shopId门店Id
       */
      updatePawnShopWindow(shopId) {
        this.$http.get("/admin/pawnShop/selectPawnShopById", {
          params: {
            shopId: shopId
          }
        }).then(resp => {
          this.updatePawnShop = resp.data.data
          let u = this.updatePawnShop
          console.log(u)
          this.selectAllShopBoss(u.contact,u.shopBossId)
        })
        this.dialogVisible3 = true
      },
      /**绑定门店仓库
       * @param {Object} warehouseId仓库Id
       */
      bindingShopWarehouse(warehouseId) {
        this.$http.get("/admin/pawnShopWarehouse/bindingShopWarehouse", {
          params: {
            shopId: this.bingdingShopId,
            warehouseId: warehouseId
          }
        }).then(resp => {
          if (resp.data.code == 200) {
            this.$message({
              message: '门店绑定成功',
              type: 'success'
            });
          } else {
            this.$message.error(resp.data.message);
          }
          this.bingdingShopId = ""
          this.loadAllPawnShop()
          this.dialogVisible2 = false
        })
      },
      /**q取消门店仓库绑定
       * @param {Object} warehouseId 仓库Id
       */
      cancelBindingShopWarehouse(warehouseId) {
        this.$http.get("/admin/pawnShopWarehouse/cancelBindingShopWarehouse", {
          params: {
            shopId: this.bingdingShopId,
            warehouseId: warehouseId
          }
        }).then(resp => {
          if (resp.data.code == 200) {
            this.$message({
              message: '解除门店绑定成功',
              type: 'success'
            });
          } else {
            this.$message.error(resp.data.message);
          }
          this.loadAllPawnShop()
          this.dialogVisible1 = false
          this.pawnShopWhList = []
          this.bingdingShopId = ""
        })
      },
      /**门店仓库绑定窗口
       * @param {Object} shopId
       */
      bingdingWindow(shopId) {
        this.bingdingShopId = shopId
        this.$http.get("/admin/pawnWarehouse/findNoBingdingWhByShopId", {
          params: {
            pageNum: this.whPageNum,
            pageSize: this.whPageSize,
            shopId: shopId
          }
        }).then(resp => {
          this.whpage = resp.data.data
        })
        this.dialogVisible2 = true
      },
      /**查看门店绑定仓库
       * @param {Object} list
       * @param {Object} shopId
       */
      findShopWh(list, shopId) {
        this.pawnShopWhList = list
        this.bingdingShopId = shopId
        this.dialogVisible1 = true
      },
      /**启用门店
       * @param {Object} shopId
       */
      updateShopStateStart(shopId) {
        this.$http.get("admin/pawnShop/updatePawnShopState", {
          params: {
            shopId: shopId,
            state: 0
          }
        }).then(resp => {
          if (resp.data.code == 200) {
            this.$message({
              message: '启用门店成功',
              type: 'success'
            });
          } else {
            this.$message.error(resp.data.message);
          }
          this.loadAllPawnShop()
        })
      },
      /**禁用门店
       * @param {Object} shopId
       */
      updateShopStateDown(shopId) {
        this.$http.get("admin/pawnShop/updatePawnShopState", {
          params: {
            shopId: shopId,
            state: 1
          }
        }).then(resp => {
          if (resp.data.code == 200) {
            this.$message({
              message: '禁用门店成功',
              type: 'success'
            });
          } else {
            this.$message.error(resp.data.message);
          }
          this.loadAllPawnShop()
        })
      },
      /**
       * 条件查询门店
       */
      findShopByCondition() {
        this.$http.get("/admin/pawnShop/loadAllPawnShop", {
          params: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            condition: this.condition
          }
        }).then(resp => {
          this.page = resp.data.data
        })
      },
      handleSizeChange2(val) {
        this.assistantPageSize = val
        this.findAllShopAssistant()
      },
      handleCurrentChange2(val) {
        this.assistantPageNum = val
        this.findAllShopAssistant()
      },
      /**分页查询
       * @param {Object} val
       */
      handleSizeChange(val) {
        this.pageSize = val
        this.loadAllPawnShop()
      },
      /**分页查询
       * @param {Object} val
       */
      handleCurrentChange(val) {
        this.pageNum = val
        this.loadAllPawnShop()
      },
      /**分页查询
       * @param {Object} val
       */
      handleWhSizeChange(val) {
        this.whPageSize = val
        this.bingdingWindow(this.bingdingShopId)
      },
      /**分页查询
       * @param {Object} val
       */
      handleWhCurrentChange(val) {
        this.whPageNum = val
        this.bingdingWindow(this.bingdingShopId)
      },
      /**
       * 加载所有门店
       */
      loadAllPawnShop() {
        this.$http.get("/admin/pawnShop/loadAllPawnShop", {
          params: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
          }
        }).then(resp => {
          this.page = resp.data.data
        })
      },
    },
    created() {
      this.loadAllPawnShop()
    }
  }
</script>

<style>
  .cl::after {
    content: '';
    display: block;
    clear: both;
  }

  .lf {
    float: left;
  }

  .rf {
    float: right;
  }
</style>
